<template>
  <div class="list-wrapper">
    <van-tabs v-model:active="active" animated sticky @click="onClick">
      <van-tab
        v-for="item in tabsList"
        :title="item.title"
        :name="item.name"
        :key="item.id"
      >
        <div v-if="!lists.length">暂无数据</div>
        <div v-else>
          <van-card
            v-for="item in lists"
            :key="item.id"
            :price="item.jiage"
            :desc="item.miaoshu"
            :title="item.title"
            :thumb="item.pic"
          >
            <template #tags>
              <van-tag plain type="danger">优惠券 {{ item.quan_jine }}</van-tag>
            </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const active = ref(0);
    const store = useStore();
    const route = useRoute();
    const lists = computed(() => store.state.list.lists);
    const tabsList = ref([
      {
        id: 1,
        title: "人气",
        name: "hot",
      },
      {
        id: 2,
        title: "最新",
        name: "latest",
      },
      {
        id: 3,
        title: "销量",
        name: "sell",
      },
      {
        id: 4,
        title: "价格",
        name: "price",
      },
    ]);
    onMounted(() => {
      store.dispatch({
        type: "list/getLists",
        params: {
          type: "hot",
          cid: route?.params?.cid,
          r: route?.query?.r || "class/cyajaxsub",
        },
      });
    });
    return {
      active,
      lists,
      tabsList,
      onClick(name: string) {
        store.dispatch({
          type: "list/getLists",
          params: {
            type: name,
            cid: route.params.cid,
            r: route?.query?.r || "class/cyajaxsub",
          },
        });
      },
    };
  },
});
</script>
